<template>
	<view class="page-order-entry">
		<view class="group">
			<view class="tips">
				已成功下单未收到补贴/未激活补贴红包？
			</view>

			<view class="desc">
				<view class="block"
					>1、一般情况下，淘宝/天猫购物支付返回，15分钟内将发放补贴现金。</view
				>
				<view class="block"
					>2、特殊情况下，如网络通信故障等，淘宝购物通知未能及时返回，需要您手动填写淘宝订单号，系统审核通过后，将自动入账现金补贴。</view
				>
			</view>
		</view>

		<view class="group">
			<text class="label">已经下单，未找到订单？一键查询</text>

			<input
				class="order-num"
				type="number"
				v-model="tradeId"
				placeholder="请输入淘宝/天猫订单号"
			/>

			<!-- <text class="copy-btn">去复制淘宝订单号</text> -->

			<button class="search-btn" @tap="inquire">找回我的订单</button>

			<template v-if="isInquire">
				<view class="res-success">
					<view class="msg">已为您找到订单{{ tradeId }}</view>

					<view class="order-info">
						<image class="cover" :src="orderInfo.itemImg" />

						<view class="title">{{ orderInfo.itemTitle }}</view>

						<button class="bind-btn" size="small" @tap="bindOrder(orderInfo.id)">
							绑定
						</button>
					</view>
				</view>
			</template>
			<view v-if="isBeing" class="being"> 该订单 {{ tradeId }} 已存在 </view>
			<view class="noData" v-if="isNodata">
				<image
					class="noData-img"
					mode="widthFix"
					src="@/static/images/common/empty-search.png"
				/>
				<text>找不到该订单</text>
			</view>

			<template>
				<view class="res-fail"> </view>
			</template>
		</view>

		<view class="group">
			<text class="label">如何找回订单？</text>

			<image
				class="tutorial"
				src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/images/order-back.png"
			/>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import Authorize from '@/components/Authorize';

export default {
	data() {
		return {
			tradeId: '',
			isInquire: false,
			orderInfo: {},
			isNodata: false,
			isBeing: false
		};
	},
	components: {
		Authorize
	},
	onLoad() {
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		inquire() {
			this.$service.member.order
				.findBytradeId({
					tradeId: this.tradeId
				})
				.then(res => {
					this.isInquire = true;
					this.orderInfo = res[0];
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
					if (err.code == 1001) {
						this.isNodata = true;
					} else if (err.code == 1003) {
						this.isBeing = true;
					} else if (err.code == 1004) {
						this.$refs.authorizeDig.open();
					}
				});
		},
		bindOrder(id) {
			this.$service.member.order
				.binding({
					tradeId: id
				})
				.then(res => {
					uni.showToast({
						title: '绑定成功！',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.back(1);
					}, 1000);
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
					if (err.code == 1001) {
						this.isNodata = true;
					} else if (err.code == 1003) {
						this.isBeing = true;
					} else if (err.code == 1004) {
						this.$refs.authorizeDig.open();
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f7fa;
}

.page-order-entry {
	.group {
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		padding-bottom: 10rpx;

		.label {
			font-size: 30rpx;
			font-weight: bold;
			margin: 50rpx 0;
		}

		.order-num {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			border: 1rpx solid #eaeaea;
			background-color: #f4f4f4;
			border-radius: 80rpx;
			width: 80%;
			margin-bottom: 30rpx;
		}

		.copy-btn {
			color: #f75601;
			text-decoration: underline;
			margin-bottom: 30rpx;
		}

		.search-btn {
			height: 70rpx;
			line-height: 70rpx;
			background-color: #f70114;
			color: #fff;
			padding: 0 100rpx;
			border-radius: 70rpx;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			letter-spacing: 1rpx;

			&::after {
				border: 0;
			}
		}

		.res-success {
			width: 80%;

			.msg {
				font-size: 28rpx;
				text-align: center;
			}

			.order-info {
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				.cover {
					height: 80rpx;
					width: 80rpx;
					background-color: red;
					flex-shrink: 0;
					border-radius: 10rpx;
				}

				.title {
					flex: 1;
					font-size: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					margin: 0 30rpx;
				}

				.bind-btn {
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50rpx;
					background-color: #f70114;
					color: #fff;
					flex-shrink: 0;
					padding: 0 30rpx;
					&::after {
						border: 0;
					}
				}
			}
		}
		.being {
			color: #221d2c;
			font-size: 28rpx;
			padding: 20rpx 0;
		}
		.noData {
			width: 410rpx;
			margin: auto;
			font-size: 28rpx;
			color: #221d2c;
			text-align: center;
			.noData-img {
				width: 410rpx;
				height: 302rpx;
			}
		}
	}

	.tips {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #fff1e2;
		color: #7f552a;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}

	.desc {
		padding: 20rpx 40rpx;
		background-color: #fff;

		.block {
			margin-bottom: 10rpx;
			font-size: 24rpx;
			color: #0c0c10;
		}
	}

	.tutorial {
		width: calc(100% - 40rpx);
	}
}
</style>
